<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <!--引入jquery-->
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
         
        <!--引入wow.js 和 animate.css文字效果-->
        <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
        <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
        <title>联系我页面</title>
        <style>
             
/*联系区域*/
section div#link_me{
    background:rgba(0,0,0,0.7);
    display: flex;/*设置为弹性布局*/
    flex-direction: column;     /* flex-direction 属性规定灵活项目的方向。column  灵活的项目将垂直显示*/
    justify-content: center;    /* 弹性布局的左右居中对齐 */
    align-items: center;        /*弹性布局的垂直居中对齐*/
    text-align: center;         /*文本居中*/
    width: 100%;
    height:100vh;/*占据全屏*/
}
section div#link_me div.link_info{
    max-width: 540px;
    max-height: 470px;
    min-width: 340px;
    min-height: 360px;
    margin: 0 auto;
    border: 8px solid rgb(255,210,0);
}
section div#link_me div.link_info h1{
    width: 85%;
    margin: 10px auto;
    color:rgb(255,210,0);
    font-weight: bolder;
    padding: 10px;
    border-bottom: 1px solid rgb(255,210,0);
}
section div#link_me div.link_info h1 span{
    color: white;
}
section div#link_me div.link_info h3 span{
    margin-left: 10px;
    margin-right: 10px;
    color: white;
}
section div#link_me div.link_info h3 span:nth-child(1){
    color: orangered;
}
section div#link_me div.link_info h3 span:nth-child(2){
    color: lightgreen;
}
section div#link_me div.link_info h3 span:nth-child(3){
    color: lightskyblue;
}
section div#link_me div.link_info h3 span:nth-child(4){
    color: gainsboro;
}
section div#link_me div.link_info div.div_p_style{
    margin-top: 25px;
}
section div#link_me div.link_info div.div_p_style p{
    font-size: 1.8rem;
}
div.link_img ul{
    padding: 0;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 10px;
    list-style-type: none;
    display: inline-block;
     
}
div.link_img ul li{
    position: relative;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}
/*设置图片位置，父类使用绝对定位，子类使用相对定位让图片在上边显示*/
div.link_img div.box{
    width: 100px;
    height: 100px;
    position: absolute;
    top:-102px;
    left: -30px;
    display:none;
}
div.link_img div.box p{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: cornflowerblue;
    border-radius: 3px;
    position: absolute;
    top: 60px;
}
/*画一个倒三角*/
div.link_img div.box p>span{
    width:0;
    height:0;
    display: block;
    border-width: 8px;
    border-radius: 1px;
    border-style: solid;
     /*border-color的四个值代表上右下左，分别实现下左上右箭头 */
    border-color: cornflowerblue transparent transparent  transparent;
    position: absolute;
    left: 40px;
}
 
div.link_img div.box img{
    width: 100%;
    height: 100%;
}
div.link_img li.nav-item>span{
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid gainsboro;
    cursor:pointer;/*鼠标箭头变成手指*/
    color:white;
}
div.link_img li.nav-item>span>a{
    font-size: 12px;
    color: white;
}
div.link_img li.nav-item>span:hover{
    border: 2px solid deepskyblue;
    background-color:rgba(0,0,0,0.8);
}
div.div_p_style{
    color: white;
}
 
        </style>
    </head>
    <body>
        <section>
            <div id="link_me">
                <div class="container span3 wow bounceInUp center" data-wow-delay="0.5s">
                    <div class="link_info">
                        <h1>CONTACT  <span>FOR ME</span></h1>
                        <h3>
                            <span>灵感</span>
                            <span>创意</span>
                            <span>设计</span>
                            <span>梦想</span>
                            <span>未来</span>
                        </h3>
                        <div class="div_p_style">
                            <p>摄影是一个充实愉悦的过程</p>
                            <p>喜欢尝试，期待新鲜事物</p>
                            <p>摄影即兴趣，兴趣即未来</p>
                            <p>让我们来服务您，便是捷径</p>
                            <p>期待有机会与您共事!</p>
                        </div>
                        <div class="link_img">
                            <ul class="nav-navbar">
                                <li class="nav-item">
                                    <div class="box" id="box1" onmouseover="display(1)" onmouseout="disappear(1)">
                                        <p>my gitee <span></span></p>
                                    </div>
                                    <span onmouseover="display(1)" onmouseout="disappear(1)">
                                        <a href="https://gitee.com/shu_run_long" target="_blank">
                                            Gitee
                                        </a>
                                    </span>
                                </li>
                                <li class="nav-item">
                                    <div class="box" id="box2" onmouseover="display(2)" onmouseout="disappear(2)">
                                        <img src="./images/gzh.jpg" alt=""> 
                                    </div>
                                    <span onmouseover="display(2)" onmouseout="disappear(2)">
                                        <a href="" target="_blank">
                                         公众号
                                        </a>
                                    </span>
                                </li>
                                <li class="nav-item">
                                    <div class="box" id="box3" onmouseover="display(3)" onmouseout="disappear(3)">
                                        <img src="./images/wechat.jpg" >
                                    </div>
                                    <span onmouseover="display(3)" onmouseout="disappear(3)">
                                       客服
                                    </span>
                                </li>
                                <li class="nav-item">
                                    <div class="box" id="box4" onmouseover="display(4)" onmouseout="disappear(4)">
                                        <img src="./images/QQ.jpg" width="10%" >
                                    </div>
                                    <span onmouseover="display(4)" onmouseout="disappear(4)">
                                       QQ 
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                     
                 
                </div>
                 
            </div>
        </section>
        <script>
            /*把WOW插件初始化wow*/
            new WOW().init();
            //鼠标移入、移除时触发事件
            function display(index){
                var boxId = "box"+index;
                var box = document.getElementById(boxId);
                box.style.display="block";
            }
             
            function  disappear(index){
                var boxId = "box"+index;
                var box = document.getElementById(boxId);
                box.style.display="none";
            }
 
        </script>
    </body>
</html>